<template>
    <div class="container">
        <header>
            <div class="Gwidth">
                <div class="left">
                    <a href="/">商城首页</a>
                </div>
                <div class="right">
                    <div class="tel">企业定制服务咨询热线400-1151717</div>
                    <!-- <div class="login">
                        <a href="" class="login_btn">登录</a>
                        <span>|</span>
                        <a href="">注册</a>
                    </div> -->
                </div>
            </div>
        </header>
        <div class="nav_bg">
            <div class="nav Gwidth">
                <img src="https://cdn.v2.17home.com/web/ad/images/phone.png">
                <ul class="flex flex--justify-content--space-between--align-items--center">
                    <li>
                        <a href="#cp1">员工桌</a>
                    </li>
                    <li>
                        <a href="#cp1">办公椅</a>
                    </li>
                    <li>
                        <a href="#cp2">老板桌</a>
                    </li>
                    <li>
                        <a href="#cp3">会议桌</a>
                    </li>
                    <li>
                        <a href="#cp3">文件柜</a>
                    </li>
                    <li>
                        <a href="#cp2">办公沙发</a>
                    </li>
                    <li>
                        <a href="">更多产品</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="ad Gwidth">
            <img src="https://cdn.v2.17home.com/web/ad/images/hd.png">
        </div>
        <div class="cp Gwidth" id="cp1">
            <div class="cp_title flex flex--justify-content--center--align-items--center">
                <img src="https://cdn.v2.17home.com/web/ad/images/left_icon.png" alt="" class="left_icon">
                <h1>员工桌&amp;办公椅</h1>
                <img src="https://cdn.v2.17home.com/web/ad/images/right_icon.png" alt="" class="right_icon">
            </div>
            <div class="cp_subtitle">欢乐在一起 情浓意更浓</div>
            <ul class="cp_list flex flex--wrap">
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp1-1.png" alt="">
                    <p class="p1">沃封现代办公椅</p>
                    <p class="p2">欢乐颂同款人体工学办公椅</p>
                    <p class="price">￥<span>599</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp1-2.png" alt="">
                    <p class="p1">君朗简约老板椅</p>
                    <p class="p2">大气出众，优质头层牛皮老板椅</p>
                    <p class="price">￥<span>799</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp1-3.png" alt="">
                    <p class="p1">君奥职员办公椅</p>
                    <p class="p2">甄选进口网布，舒适之选</p>
                    <p class="price">￥<span>99</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp1-4.png" alt="">
                    <p class="p1">苍雅布艺椅</p>
                    <p class="p2">新升级乳胶坐垫，从健康出发</p>
                    <p class="price">￥<span>359</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp1-5.png" alt="">
                    <p class="p1">金尚职员办公桌</p>
                    <p class="p2">有效阻隔键盘敲击声</p>
                    <p class="price">￥<span>999</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp1-6.png" alt="">
                    <p class="p1">金阳屏风办公桌</p>
                    <p class="p2">一站式搭配舒适办公空间</p>
                    <p class="price">￥<span>428</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp1-7.png" alt="">
                    <p class="p1">金致实木办公桌</p>
                    <p class="p2">实木十字型职员办公桌</p>
                    <p class="price">￥<span>4999</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp1-8.png" alt="">
                    <p class="p1">金盾简约办公桌</p>
                    <p class="p2">领略简约办公空间，低调而沉稳</p>
                    <p class="price">￥<span>399</span>起</p>
                </li>
            </ul>
        </div>
        <div class="cp Gwidth" id="cp2">
            <div class="cp_title flex flex--justify-content--center--align-items--center">
                <img src="https://cdn.v2.17home.com/web/ad/images/left_icon.png" alt="" class="left_icon">
                <h1>老板桌&amp;办公沙发</h1>
                <img src="https://cdn.v2.17home.com/web/ad/images/right_icon.png" alt="" class="right_icon">
            </div>
            <div class="cp_subtitle">吉祥如意戊戌年</div>
            <ul class="cp_list flex flex--wrap">
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp2-1.png" alt="">
                    <p class="p1">安澜现代老板桌</p>
                    <p class="p2">大容量侧柜，海量储存空间</p>
                    <p class="price">￥<span>1998</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp2-2.png" alt="">
                    <p class="p1">凌峰简约办公桌</p>
                    <p class="p2">配套多功能皮质办公椅</p>
                    <p class="price">￥<span>1399</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp2-3.png" alt="">
                    <p class="p1">凌跃系列老板桌</p>
                    <p class="p2">桌面防滑设计，触感舒适</p>
                    <p class="price">￥<span>1199</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp2-4.png" alt="">
                    <p class="p1">凌天实木简约办公桌</p>
                    <p class="p2">超宽松大桌面，创造更多可能性</p>
                    <p class="price">￥<span>4999</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp2-5.png" alt="">
                    <p class="p1">云岚舒适皮质沙发</p>
                    <p class="p2">舒适坐感，如置云端</p>
                    <p class="price">￥<span>2880</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp2-6.png" alt="">
                    <p class="p1">云柔布艺会客沙发</p>
                    <p class="p2">北欧轻奢风简约会客沙发</p>
                    <p class="price">￥<span>1919</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp2-7.png" alt="">
                    <p class="p1">云尚办公沙发</p>
                    <p class="p2">实木框架，乳胶垫更舒适</p>
                    <p class="price">￥<span>1799</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp2-8.png" alt="">
                    <p class="p1">云轻极简主义沙发</p>
                    <p class="p2">化繁为简，犹如生活</p>
                    <p class="price">￥<span>1928</span>起</p>
                </li>
            </ul>
        </div>
        <div class="cp Gwidth" id="cp3">
            <div class="cp_title flex flex--justify-content--center--align-items--center">
                <img src="https://cdn.v2.17home.com/web/ad/images/left_icon.png" alt="" class="left_icon">
                <h1>会议桌&amp;文件柜</h1>
                <img src="https://cdn.v2.17home.com/web/ad/images/right_icon.png" alt="" class="right_icon">
            </div>
            <div class="cp_subtitle">欢度春节 祝福万家</div>
            <ul class="cp_list flex flex--wrap">
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp3-1.png" alt="">
                    <p class="p1">凌寒实木会议桌</p>
                    <p class="p2">采用新西兰进口松木，木纹清晰</p>
                    <p class="price">￥<span>999</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp3-2.png" alt="">
                    <p class="p1">新尚钢琴烤漆会议桌</p>
                    <p class="p2">现代主义与办公室美学的碰撞</p>
                    <p class="price">￥<span>8999</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp3-3.png" alt="">
                    <p class="p1">非凡小型椭圆会议桌</p>
                    <p class="p2">椭圆形边缘设计层次感十足</p>
                    <p class="price">￥<span>796</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp3-4.png" alt="">
                    <p class="p1">御风现代会议桌</p>
                    <p class="p2">简洁的设计令人心清气爽，才思敏捷</p>
                    <p class="price">￥<span>899</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp3-5.png" alt="">
                    <p class="p1">金盾皮面文件柜</p>
                    <p class="p2">带来不同的视觉感受与肌肤触感</p>
                    <p class="price">￥<span>3999</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp3-6.png" alt="">
                    <p class="p1">汉诺威财务文件柜</p>
                    <p class="p2">多功能，带锁简约风财务柜</p>
                    <p class="price">￥<span>699</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp3-7.png" alt="">
                    <p class="p1">科隆铁皮文件柜</p>
                    <p class="p2">加厚全钢文件柜超大储存</p>
                    <p class="price">￥<span>395</span>起</p>
                </li>
                <li @click="OpenRuler">
                    <img src="https://cdn.v2.17home.com/web/ad/images/cp3-8.png" alt="">
                    <p class="p1">汉克小巧文件柜</p>
                    <p class="p2">夹缝收纳储物文件柜</p>
                    <p class="price">￥<span>299</span>起</p>
                </li>
            </ul>
        </div>
        <div class="brand Gwidth">
            <div class="cp_title flex flex--justify-content--center--align-items--center">
                <img src="https://cdn.v2.17home.com/web/ad/images/left_icon.png" alt="" class="left_icon">
                <h1>合作品牌</h1>
                <img src="https://cdn.v2.17home.com/web/ad/images/right_icon.png" alt="" class="right_icon">
            </div>
            <div class="cp_subtitle">创造和谐合作关系</div>
            <ul class="brand_list flex flex--wrap">
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand1.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand2.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand3.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand4.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand5.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand6.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand7.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand8.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand9.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand10.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand11.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand12.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand13.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand14.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand15.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand16.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand17.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand18.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand19.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand20.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand21.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand22.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand23.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand24.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand25.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand26.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand27.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand28.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand29.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand30.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand31.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand32.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand33.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand34.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand35.png" alt="">
                </li>
                <li>
                    <img src="https://cdn.v2.17home.com/web/ad/images/brand36.png" alt="">
                </li>
            </ul>
        </div>
        <div class="yy Gwidth">
            <div class="cp_title flex flex--justify-content--center--align-items--center">
                <img src="https://cdn.v2.17home.com/web/ad/images/left_icon.png" alt="" class="left_icon">
                <h1>更多福利速来预约</h1>
                <img src="https://cdn.v2.17home.com/web/ad/images/right_icon.png" alt="" class="right_icon">
            </div>
            <div class="cp_subtitle">一点预约 天天有惊喜</div>
            <div class="yy_bg">
                <ul class="flex flex--align-items--center">
                    <li @click="OpenRuler">
                        <img src="https://cdn.v2.17home.com/web/ad/images/yy1.png">
                        <p class="p1">免费设计</p>
                        <p class="p2 showpopup">立即预约</p>
                    </li>
                    <li @click="OpenRuler">
                        <img src="https://cdn.v2.17home.com/web/ad/images/yy2.png">
                        <p class="p1">免费量尺</p>
                        <p class="p2 showpopup">立即预约</p>
                    </li>
                    <li @click="OpenRuler">
                        <img src="https://cdn.v2.17home.com/web/ad/images/yy3.png">
                        <p class="p1">免费报价</p>
                        <p class="p2 showpopup">立即预约</p>
                    </li>
                    <li @click="OpenRuler">
                        <img src="https://cdn.v2.17home.com/web/ad/images/yy4.png">
                        <p class="p1">以旧换新</p>
                        <p class="p2 showpopup">立即预约</p>
                    </li>
                </ul>
                <p class="contact">定制专线：400-115-1717</p>
                <p class="web">一起家具网官方网站：www.17home.com</p>
            </div>
        </div>
        <div class="fot_btn Gwidth">
            <a href="http://testpc.17home.com/shop/list?id=18" target="_blank">
                <img src="https://cdn.v2.17home.com/web/ad/images/gobg.png" alt="">
            </a>
            <a href="#">
                <img src="https://cdn.v2.17home.com/web/ad/images/gotop.png" alt="" class="gotop">
            </a>
        </div>
        <!-- 砍价服务 -->
		<BargainingService :is_show="bargaining_show" @onClose="onClose_bargaining" @onSuccess="onSuccess" />
		<!-- 免费设计 -->
		<FreeDesign :is_show="free_show" @onClose="onCloseFree" @onSuccess="onSuccess"  />
		<!-- 免费报价 -->
		<FreeQuote :is_show="free_quote" @onClose="onCloseQuote" @onSuccess="onSuccess" />
		<!-- 提交成功提示 -->
		<SuccessTips :title="success_msg.title" :des="success_msg.des" :is_show="success_tips" @onClose="onCloseTips" @onSuccess="onSuccess" />
		<!-- 上门尺量弹窗 -->
		<DoorToDoorRuler :citys="open_city" :target_id="target_id" :is_show="door_to_door_ruler" @onClose="onCloseRuler"/>
        <!-- 侧栏 -->
		<Sidebar/>
    </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import BargainingService from "~/components/Bargaining_service.vue"
import FreeDesign from "~/components/Free_design.vue"
import FreeQuote from "~/components/Free_quote.vue"
import SuccessTips from "~/components/Submit_success.vue"
import DoorToDoorRuler from "~/components/DoorToDoor_ruler.vue"
import Sidebar from "~/components/Sidebar.vue";
export default {
    components: {
		BargainingService,
		FreeDesign,
		FreeQuote,
		SuccessTips,
        DoorToDoorRuler
	},
    data(){
        return{
            bargaining_show:false,//是否展示砍价申请弹窗
            free_show:false,//是否展示免费设计弹窗
            free_quote:false,//是否展示3s报价弹窗
            door_to_door_ruler:false,
            success_tips:false,
            success_msg:{},//成功提示
            open_city:[],//开通城市列表
            target_id:'',
        }
    },
    created(){
        
        
    },
    computed:{
		...mapState(['address','venue']),
        
	},

    mounted() {
		this.getOpenCityList()
	},
    methods:{
        // 成功
		onSuccess(e){
			this.success_msg = e
			this.success_tips = true
		},
        // 关闭砍价服务弹窗
		onClose_bargaining(e){
			this.bargaining_show = false
			
		},
        onCloseFree(){
			this.free_show = false
		},
        onCloseQuote(){
			this.free_quote = false
		},
		onCloseTips(){
			this.success_tips = false
		},
        // 打开弹窗
		OpenRuler(id=''){
			this.target_id = id
			this.door_to_door_ruler = true
		},
        onCloseRuler(){
			this.door_to_door_ruler = false
		},
        // 开通城市列表
		async getOpenCityList(){
            let{data:{code,data}} = await this.$http.post(this.$API.getOpenCityList,{})
            if (code==200) {
                this.open_city = data.data
                
            }
        },
    },
}
</script>
<style scoped>
    header{
        max-width: 1920px;
        height: 600px;
        background: url(https://cdn.v2.17home.com/web/ad/images/banner.png) no-repeat top center;
        background-size: cover;
        margin: 0 auto;
        color: #fff;
    }
    header .Gwidth{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 27px;
        color: #fff;
    }
    header a{
        white-space: nowrap;
        color: #fff;
    }
    header .left{
        background: url(https://cdn.v2.17home.com/web/ad/images/home.png) no-repeat left center;
        width: 24px;
        height: 22px;
        padding-left: 30px;
    }
    header .right{
        display: flex;
        align-items: center;
    }
    header .right .login_btn{
        background: url(https://cdn.v2.17home.com/web/ad/images/user.png)left center no-repeat;
        background-size: 12px 14px;
        padding-left: 16px;
        margin-left: 30px;

    }
    .nav_bg {
        max-width: 1920px;
        height: 150px;
        background-color: #E0252C;
        margin: 0 auto;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 888;
    }
    .nav img {
        width: 623px;
        height: 71px;
        display: block;
        margin: 0 auto;
    }
    .nav ul {
        margin-top: 22px;
        display: flex;
    }
    .nav ul li {
        width: 184px;
        height: 29px;
        line-height: 29px;
        text-align: center;
        border-right: 1px dashed #E2AF95;
    }
    .nav ul li:last-child {
        border: 0;
    }
    .nav ul li a {
        color: #fff;
        font-size: 22px;
    }
    .cp {
        margin-top: 73px;
    }
    .cp_title{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cp_title img {
        width: 100px;
        height: 44px;
    }
    .cp_title h1 {
        font-size: 30px;
        color: #B50A0D;
        margin: 0 30px;
        font-weight: bold;
    }
    .cp_subtitle {
        margin-top: 10px;
        margin-bottom: 29px;
        font-size: 20px;
        color: #DF5056;
        text-align: center;
    }
    .cp_list{
        display: flex;
        flex-wrap: wrap;
    }
    .cp_list li {
        margin-right: 10px;
        margin-bottom: 10px;
        width: 292px;
        height: 464px;
        background-color: #fff;
        text-align: center;
        cursor: pointer;
    }
    .cp_list li img {
        width: 292px;
        height: 294px;
    }
    .cp_list li .p1 {
        margin-top: 26px;
        font-size: 22px;
        color: #333;
    }
    .cp_list li .p2 {
        font-size: 16px;
        color: #666;
        margin-top: 10px;
    }
    .cp_list li .price {
        width: 131px;
        height: 36px;
        background: #000000;
        border-radius: 18px;
        margin: 24px auto;
        text-align: center;
        line-height: 36px;
        color: #fff;
        font-size: 14px;
    }
    .cp_list li .price span {
        font-size: 22px;
        margin: 0 3px;
    }
    .cp_list li:nth-child(4n) {
        margin-right: 0;
    }
    .brand {
        margin-top: 73px;
    }
    .brand_list {
        width: 1200px;
        background: url(https://cdn.v2.17home.com/web/ad/images/brand_bg.png) no-repeat;
        padding: 30px 23px;
        display: flex;
        flex-wrap: wrap;
    }
    .brand_list li {
        width: 188px;
        height: 110px;
        margin: 0 5px 8px 0;
    }
    .brand_list li img {
        width: 100%;
        height: 100%;
    }
    .brand_list li:nth-child(6n) {
        margin: 0 0 8px 0;
    }
    .yy {
        margin-top: 73px;
    }
    .yy .yy_bg {
        width: 1200px;
        height: 436px;
        background: url(https://cdn.v2.17home.com/web/ad/images/yybg.png) no-repeat;
        padding-top: 52px;
        padding-bottom: 34px;
    }
    .yy_bg ul{
        display: flex;
        flex-wrap: wrap;
    }
    .yy_bg ul li:first-child {
        margin-left: 125px;
    }
    .yy_bg ul li {
        margin-left: 160px;
        width: 116px;
    }
    .yy_bg ul li img {
        width: 116px;
        height: 117px;
    }
    .yy_bg ul li .p1 {
        font-size: 24px;
        color: #333;
        font-weight: bold;
        margin: 20px 0;
        text-align: center;
    }
    .yy_bg ul li .p2 {
        width: 84px;
        height: 28px;
        background: #E3875A;
        box-shadow: 0px 3px 2px 0px rgb(0 0 0 / 10%);
        border-radius: 14px;
        line-height: 28px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        margin: 0 auto;
        cursor: pointer;
    }
    .yy_bg .contact {
        margin-top: 60px;
        font-size: 24px;
        color: #333;
        text-align: center;
    }
    .yy_bg .web {
        margin-top: 14px;
        font-size: 24px;
        color: #333;
        text-align: center;
    }
    .fot_btn {
        margin: 70px auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .fot_btn img {
        width: 255px;
        height: 65px;
        cursor: pointer;
    }
    .fot_btn .gotop {
        margin-left: 195px;
    }
</style>
